<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Minesweeper</title>
</head>
<body>
    <table id="minefield"></table>

    <script>
        const MINEFIELD_SIZE = 5; // 网格大小
        const MINES = 5; // 雷的数量

        function createMines() {
            const mines = [];
            while (mines.length < MINES) {
                const x = Math.floor(Math.random() * MINEFIELD_SIZE);
                const y = Math.floor(Math.random() * MINEFIELD_SIZE);
                if (!mines.some(([mx, my]) => mx === x && my === y)) {
                    mines.push([x, y]);
                }
            }
            return mines;
        }

        function revealCell(x, y) {
            const neighbors = getNeighbors(x, y);
            const mineCount = neighbors.filter(([nx, ny]) => mines.includes([nx, ny])).length;
            document.getElementById(`cell-${x}-${y}`).innerText = mineCount;
        }

        function getNeighbors(x, y) {
            const offsets = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
            return offsets.map(offset => [x + offset[0], y + offset[1]]);
        }

        const mines = createMines();
        const minefield = document.getElementById('minefield');

        for (let x = 0; x < MINEFIELD_SIZE; x++) {
            const row = document.createElement('tr');
            for (let y = 0; y < MINEFIELD_SIZE; y++) {
                const cell = document.createElement('td');
                cell.id = `cell-${x}-${y}`;
                cell.addEventListener('click', () => revealCell(x, y));
                row.appendChild(cell);
            }
            minefield.appendChild(row);
        }
    </script>
</body>
</html>